<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <form v-on:submit="submitHandler">
            <p>用户名：<input v-model="userName" type="text"></p>
            <p>城市：
                <select v-model.number="city">
                    <option value="1">北京</option>
                    <option value="2">上海</option>
                    <option value="3">深圳</option>
                    <option value="4">西安</option>
                    <option value="5">成都</option>
                    <option value="6">武汉</option>
                    <option value="7">南白滩</option>
                </select>
            </p>
            <p>性别：
                <input v-model.number="sex" name="sex" type="radio" value="1">男
                <input v-model.number="sex" name="sex" type="radio" value="2">女
            </p>
            <p>
                爱好：
                <input v-model.number="hobby" type="checkbox" value="1">学习
                <input v-model.number="hobby" type="checkbox" value="2">睡觉
                <input v-model.number="hobby" type="checkbox" value="3">吃饭
                <input v-model.number="hobby" type="checkbox" value="4">品茗
            </p>
            <button>提交</button>
        </form>

    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            userName:"zhangsan",
            city:2,
            sex:1,
            hobby:[1,2,3]
        },
        methods:{
            submitHandler(e){
                e.preventDefault();
                console.log("用户名",this.userName);
                console.log("城市",this.city);
                console.log("性别",this.sex);
                console.log("爱好",this.hobby,this.hobby.length);

            }
        }
    })
</script>
</html>